<!-- 
    @author: wyx
    @date: 2022-09-15
    @description: 商机人脉
-->

<template>
    <div class="business-contact content">
       
        <top-bitmap 
            :businessnum="businessNum" 
            :possiblenum="possiblenum" 
        ></top-bitmap>

        <div class="business-contact-top">
            <business-header 
            ref="businessheader" 
            typeName="商机人脉查看" 
            :num="num" 
            :isLogin="isLogin" 
            @close="buyclose"
            >
                <div slot="btn">
                    <el-button 
                    size="small" 
                    type="primary" 
                    @click="handleClick" 
                    v-czc="['商机人脉圈', '打开弹窗' , '发布独家商机人脉',0 ,'businessContact-dialog-publish']"
                    >
                        发布独家商机人脉
                    </el-button>
                </div>
            </business-header>
        </div>

        <el-card class="business-contact-main">
            <el-tabs v-model="activeName">
                <el-tab-pane name="0">
                    <div 
                    slot="label" 
                    v-czc="['商机人脉圈', '导航' , '最新' ,0 ,'businessContact-btn-newest']"
                    >
                        最新
                    </div>

                    <newest 
                        v-if="activeName == 0" 
                        ref="newest"
                        :isLogin="isLogin"
                        :permissionnum.sync="num" 
                        :businessnum.sync="businessNum"
                        :possiblenum.sync="possiblenum"
                        @needBuy="getneedBuy"
                    ></newest>
                </el-tab-pane>

                <el-tab-pane name="1" lazy>
                    <div 
                    slot="label" 
                    v-czc="['商机人脉圈', '导航' , '已查看' ,0 ,'businessContact-btn-haveSee']"
                    >
                        已查看
                    </div>

                    <have-see 
                        v-if="activeName == 1"
                    ></have-see>
                </el-tab-pane>

            </el-tabs>
        </el-card>

        <!--发布独家商机人脉-->
        <el-dialog 
        title="独家商机发布" 
        width="800px" 
        :visible.sync="businessDialog" 
        class="business-form-dialog"
        >
            <business-form 
                ref="businessDialog" 
                v-if="businessDialog" 
                @close="businessDialog = false"
            ></business-form>
        </el-dialog>

        <guide-popconfirm
            v-if="!needToCompleteInfo"
            name="guide-business-contact"
            :list="guideList"
        ></guide-popconfirm>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import dialogWaitList from '@js/dialog-wait-list.js';

import {buildTdk} from '@config/tdk';

import GuidePopconfirm from '@/components/sys/guide-popconfirm/index.vue';
import appNode from '@js/app-node';
import businessHeader from './components/businessHeader.vue';
import businessForm from './components/businessForm.vue';
import newest from './components/newest.vue';
import haveSee from './components/haveSee.vue';

import topBitmap from './components/top-bitmap.vue';

export default {
    head() {
        return buildTdk('businessContact');
    },
    layout: 'client',
    components: {
        GuidePopconfirm,
        businessHeader,
        businessForm,
        newest,
        haveSee,
        topBitmap
    },
    async asyncData(context) {},
    data() {
        return {
            num: 0, // 拥有服务数量
            activeName: '0',

            businessDialog: false, // 发布商机人脉
            
            businessNum:0, // 商机数量
            possiblenum:0, // 人脉数量
            isLogin: null,

            guideList: [
                {
                    title: '设置需要匹配的项目商机和人脉',
                    placement: 'left',
                    btn: '下一步',
                    position: {
                        right: '72px',
                        top: '139px',
                    },
                    size: [140, 50],
                },
                {
                    title: '点击查看即可',
                    placement: 'top',
                    btn: '开始使用吧',
                     position: {
                        right: '5px',
                        top: '395px',
                    },
                    size: [100, 40],
                },
            ],

        };
    },
    computed: {
        ...mapGetters({
            needToCompleteInfo: 'userinfo/getNeedToCompleteInfo',
        }),
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),

        buyclose() {
            this.$refs.newest.getLatistPermissionNum();
        },
        /** 发布商机人脉 */
        handleClick() {
            // this.businessDialog = true;

            showMsgBox('该功能即将上线敬请期待！');
        },
        getneedBuy() {
            this.$refs.businessheader.toBuy();
        },

        // 判断是否登录
        checkLoginHandler() {
            this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                login:()=>{
                    this.isLogin = true;
                },
                noLogin: () =>{
                    this.isLogin = false;
                },
            });
        },
    },
    created() {
        // 检查登录状态
        this.checkLoginHandler();
    },
    mounted() {
        // 获取服务权限次数
        this.queryStatisticData(arr => {
            var service = arr.filter(item => item.code === 'QZSJTS'),
                remain = service[0].surplus;

            if (remain <= 0 || !remain) {
                // 没次数
                return;
            }

            // 在列队中注册-分享引导登录
            dialogWaitList.push(() => {
                this.$alert(`您有${remain}次查看查看商机人脉的次数，点击查看只消耗1次`, '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                }).then(() => {
                    dialogWaitList.next();
                });
            }, 4);

            
        });
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.business-contact {
    padding-top: 13px;
    .top-bitmap{
        margin-bottom: 12px;
    }

    .business-contact-main {
        margin-top: 12px;
        ::v-deep .el-tabs__header{
            margin: 0;
        }
        ::v-deep .el-card__body{
            padding-top: 10px;
        }
    }
    .el-card{
        border-radius: 0;
    }
    .business-form-dialog{
        ::v-deep .el-dialog__body {
            padding: 10px ;
        }   
    }
}
</style>
